<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 观察者模式  就是解决了 回调地狱  和  异步（还没讲）
        // 这里解决的是 回调地狱（多层嵌套回调）
        class Observer{
            constructor () {
                this.obj = {}
            }
            // 订阅者  就是往里面添加债主
            addEvent (eventName,fn) {
                if (typeof this.obj[eventName] === "undefined") {
                    // 你是债主类型 然而我的债主太多了 我就创建一个债主群
                    this.obj[eventName] = [];
                } 
                //  一开始就没有有债主群 if就创建了一个债主群  然后把你放里面  fn 就是我欠的钱 记录上
                // 一开始我就有债主群  那我直接把你放里面  fn 就是我欠的钱 记录上
                this.obj[eventName].push(fn);
            }
            // 发布者  通知债主们
            trigger(eventName){
                if (typeof this.obj[eventName] !== "undefined") {
                    this.obj[eventName].forEach(item => {
                    item()
                });
                } else {
                    throw Error ('没有债主')
                }
            }
        }

        // 欠钱本人
        let zhangsan = new Observer();

        // 添加债主 和欠款
        zhangsan.addEvent('zhaizhu1',function(){
            console.log("王二欠一百");
            zhangsan.trigger('zhaizhu2'); // 还完王二还李三
        })
        zhangsan.addEvent('zhaizhu2',function(){
            console.log("李三欠二百");
            zhangsan.trigger('zhaizhu3')// 还完李三还赵四

        })
        zhangsan.addEvent('zhaizhu3',function(){
            console.log("赵四欠三百");
            zhangsan.trigger('zhaizhu4')// 还完赵四还八路
        })
        zhangsan.addEvent('zhaizhu4',function(){
            console.log("八路欠四百");
        })

        // 两秒后 我有钱了  该还钱了
        setTimeout(function() {
            zhangsan.trigger('zhaizhu1')
        },2000)
    </script>
</body>
</html>